<template>
  <view class="detailIntroduceStyle">
    <view class="title" v-if="asyncImgs && asyncImgs.goods">
      <image :src="asyncImgs.goods.line_left" alt="" mode="aspectFill" />
      <text>{{ $t("goods.detail") }}</text>
      <image :src="asyncImgs.goods.line_right" alt="" mode="aspectFill" />
    </view>
    <view class="content rich-text-node">
      <view class="background"></view>
      <view class="content" v-html="richText"></view>
    </view>
    <view class="no-data"> {{$t('home.noMore')}} ~ </view>
  </view>
</template>

<script>
export default {
  props: {
    goodsInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isRefresh: Boolean,
  },
  watch: {
    isRefresh(e) {
      if (e == true) {
      }
    },
  },
  data() {
    return {
      richText: "",
    };
  },
  computed: {},
  methods: {
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(
        /style="[^"]+"/gi,
        function (match, capture) {
          match = match
            .replace(/width:[^;]+;/gi, "max-width:100%;")
            .replace(/width:[^;]+;/gi, "max-width:100%;");
          return match;
        }
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
      );
      return newContent;
    },
  },
  created() {
    this.richText = this.formatRichText(this.goodsInfo.detail);
  },
};
</script>

<style scoped lang="less">
.detailIntroduceStyle {
  width: 100%;
  .title {
    height: 12vw;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    text {
      margin: 0 20rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
    }
    image {
      width: 60rpx;
      height: 12rpx;
    }
  }
  .content {
    position: relative;
    .background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      background-position: center;
      z-index: -1;
    }
    .content {
      padding: 0 10rpx 6.13vw;
      width: 100%;
      overflow: hidden;
      img {
        max-width: 100%;
      }
    }
  }

  .no-data {
    width: 100%;
    padding: 5.6vw 0 2vw;
    background: #f2f2f2;
    font-size: 22rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #c1c1c1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
